(function(window){
  
    var slide = function ( container ) {
      this.init( container );
    };

    
    slide.prototype = {
      init: function( container ) {
        this.obj = document.getElementById( container );
        this.ul = this.obj.querySelector( "ul" );
        this.li = this.obj.querySelectorAll( "li" );
        this.images = this.obj.querySelectorAll( "img" );
        this.index = 0;
        this.startX = this.startY = 0;
        this.moved = false;
        this.timer = this.play = null;
        this.width = this.obj.offsetWidth;
        this.setSize();
        this.autoPlay();
        this.bindTouch();
      },
      bindTouch: function() {
        //绑定触摸事件
        this.obj.addEventListener("touchstart", (function( _this ) {
          return function() { 
            _this.touchStart.apply ( _this, arguments ); 
          };
        })(this), false);
        
        this.obj.addEventListener("touchmove", (function( _this ) {
          return function() {
            _this.touchMove.apply ( _this, arguments );
          }
        })(this), false);
        
        this.obj.addEventListener("touchend", (function( _this ) {
          return function() {
            _this.touchEnd.apply ( _this, arguments );
          }
        })(this), false);
        
        this.obj.addEventListener("touchcancel", (function( _this ) {
          return function() {
            _this.touchEnd.apply ( _this, arguments );
          }
        })(this), false);
      },
      setSize: function() {
        this.ul.style.width = this.width * this.li.length + "px";
        for (var i=0; li=this.li[i]; i++) {
          li.style.width = this.width + "px";
        }
      },
      autoPlay: function() {
        this.play = setInterval( (function( _this ) {
          return function() {
            _this.index++;
            _this.cover();
          }
        })(this), 4000);
      },
      cover: function() {
        ( this.index < 0 ) && ( this.index = this.li.length-1 );
        ( this.index >= this.li.length ) && ( this.index = 0 );
        this.move( -this.index * this.width );
      },
      move: function( target ) {
        clearInterval( this.timer );
        var _this = this;
        this.timer = setInterval(function(){
          var speed = ( target - _this.ul.offsetLeft ) / 5;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          _this.ul.style.marginLeft = _this.ul.offsetLeft + speed + "px";
        }, 30);
      },
      touchStart: function( e ) {
        //清除自动播放
        clearInterval( this.play );
        e.preventDefault();
        var touch = e.touches[0];
        this.startX = touch.pageX;
        this.startY = touch.pageY;
      },
      touchMove: function( e ) {
        e.preventDefault();
        var touch = e.touches[0];
        var x = touch.pageX - this.startX;
        var y = touch.pageY - this.startY;
        if ( !this.moved ) {
          if ( x >= 40 && y <= 20 ) {
            this.index --;
            this.cover();
            this.moved = true;
          }
          if( x <= -40 && y <= 20 ) {
            this.index ++;
            this.cover();
            this.moved = true;
          }
        }
      },
      touchEnd: function( e ) {
        e.preventDefault();
        this.autoPlay();
        this.moved = false;
      }
    }
    
    //外部调用
    window.utuoSlide = function( container ) {
      return function( container ){
        window.addEventListener("load", function(){
          this.photoSlide = new slide ( container );
        }, false);
        window.addEventListener("resize", function(){
          clearInterval( this.photoSlide.timer );
          clearInterval( this.photoSlide.play );
          this.photoSlide = new slide ( container );
        }, false);
      }( container )
    };
  })(window);